<div class="l-application-wrapper">
    <div class="l-application-title">
        <span>Application</span>
    </div>
    <div class="l-application-search">
        <input type="text" placeholder="{{i18nText.SEARCH_INPUT_GUIDE}}" class="l-search-input"
               ppSearchInput
               [searchMinLength]="SEARCH_MIN_LENGTH"
               [useEnter]="searchUseEnter"
               (outCancel)="onCancel()"
               (outSearch)="onSearch($event)"
               #searchInput>
    </div>
    <div class="l-application-list">
        <ng-container *ngIf="!isEmpty; else emptyText">
            <pp-application-list-for-header
                    [showTitle]="showTitle"
                    [restCount]="restCount"
                    [focusIndex]="focusIndex"
                    [focusType]="focusType"
                    [applicationList]="filteredAppList"
                    [selectedApplication]="selectedApp"
                    [funcImagePath]="funcImagePath"
                    (outSelected)="onSelectApp($event)"
                    (outFocused)="onFocused($event)">
            </pp-application-list-for-header>
        </ng-container>
        <ng-template #emptyText>
            <p class="l-empty-text">{{i18nText.EMPTY}}</p>
        </ng-template>
    </div>
    <pp-film-for-disable *ngIf="useDisable" [zIndex]="9" [marginWidth]="0"></pp-film-for-disable>
    <pp-loading [showLoading]="showLoading" [zIndex]="11"></pp-loading>
</div>
